<template>
  <div class="pages" tabindex="0" ref="pageContainer">
    <div class="left"></div>
    <div class="center">
      <div class="video-container">
        <div class="video-title-info">
          <img src="/static/mediaList/video/time.png" alt="" class="time" />
          <span>
            {{ record?.takeTime || "--" }}
          </span>
          <span style="margin-left: 12px">
            {{ record?.fileSize || "--" }}
          </span>
          <span style="margin-left: 12px">
            {{ record?.resolution || "--" }}
          </span>
        </div>
        <div class="center-top">
          <div class="info-top">
            <ElPopover
              placement="top"
              trigger="hover"
              :width="300"
              v-if="name.length > 30"
            >
              <template #reference>
                <span class="spanText single-line-ellipsis">{{ name }}</span>
              </template>
              <div class="multi-line-content">
                {{ name }}
              </div>
            </ElPopover>
            <span class="spanText single-line-ellipsis" v-else>{{ name }}</span>
            <span>{{ currentIndex + 1 }}/{{ imgList.length }}</span>
          </div>
        </div>
        <div class="video-container-img">
          <!-- 大图显示区域 -->
          <div class="main-preview">
            <div class="preview-wrapper">
              <!-- 左切换按钮 -->
              <button
                class="nav-button nav-button-left"
                @click="previousMedia"
                :disabled="currentIndex === 0"
              >
                <svg viewBox="0 0 24 24" width="24" height="24">
                  <path
                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                    fill="currentColor"
                  />
                </svg>
              </button>
              <!-- 主媒体显示 -->
              <div class="main-media-container">
                <!-- 图片显示 -->
                <img
                  v-if="
                    imgList.length > 0 &&
                    isImageFormat(imgList[currentIndex]?.suffix)
                  "
                  :src="imgList[currentIndex]?.fileUrl"
                  crossorigin="anonymous"
                  alt=""
                  class="video"
                  :style="getImageStyle(imgList[currentIndex]?.id)"
                />
                <!-- 视频显示 -->
                <video
                  v-else-if="
                    imgList.length > 0 &&
                    isVideoFormat(imgList[currentIndex]?.suffix)
                  "
                  :src="imgList[currentIndex]?.videoUrl"
                  controls
                  class="video"
                  ref="videoRef"
                  @play="onPlay"
                  @pause="onPause"
                  @ended="onEnded"
                  @loadedmetadata="onVideoLoaded"
                  preload="auto"
                  controlsList="nodownload noremoteplayback"
                  disablePictureInPicture
                  :muted="isMuted"
                ></video>
              </div>
              <!-- 右切换按钮 -->
              <button
                class="nav-button nav-button-right"
                @click="nextMedia"
                :disabled="currentIndex === imgList.length - 1"
              >
                <svg viewBox="0 0 24 24" width="24" height="24">
                  <path
                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    fill="currentColor"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <!-- 图片按钮 -->
        <div class="video-btns" v-if="currentMediaType === 'image'">
          <img
            src="/static/mediaList/img/big.png"
            class="img-center margin-left"
            alt=""
            @click="zoomIn"
          />
          <img
            src="/static/mediaList/img/reduce.png"
            class="img-center margin-left"
            alt=""
            @click="zoomOut"
          />
          <span
            class="margin-left"
            style="
              position: relative;
              display: inline-flex;
              align-items: center;
            "
            @click="resetScale"
          >
            1:1
            <span class="divider"></span>
          </span>
          <img
            src="/static/mediaList/img/tleft.png"
            class="img-center margin-left"
            alt=""
            @click="rotateLeft"
          />
          <img
            src="/static/mediaList/img/tright.png"
            class="img-center margin-left"
            alt=""
            @click="rotateRight"
          />
          <div
            style="
              position: relative;
              display: inline-flex;
              align-items: center;
            "
          >
            <img
              src="/static/mediaList/img/dowload.png"
              class="img-center margin-left"
              alt=""
              @click="downloadItem"
            />
            <span class="divider"></span>
          </div>

          <img
            src="/static/mediaList/img/del.png"
            class="img-center margin-left"
            alt=""
            @click="delItem"
          />
          <img
            src="/static/mediaList/img/screen.png"
            class="img-center margin-left"
            alt=""
            @click="toggleFullScreen"
          />
          <!-- <img
            src="/static/mediaList/img/share.png"
            class="img-center margin-left"
            alt=""
            @click="toggleShare"
          /> -->
        </div>
        <!-- 视频按钮 -->
        <div class="video-btns" v-if="currentMediaType === 'video'">
          <!-- <img
            src="/static/mediaList/video/left.png"
            class="img-center"
            alt="快退"
            @click="rewind"
          />
          <img
            :src="
              isPlaying
                ? '/static/mediaList/video/start.png'
                : '/static/mediaList/video/stop.png'
            "
            class="img-play"
            alt="播放/暂停"
            @click="togglePlay"
          />
          <img
            src="/static/mediaList/video/right.png"
            class="img-center"
            alt="快进"
            @click="fastForward"
          /> -->
          <!-- 添加自定义音量控制 -->
          <div style="position: relative">
            <div class="volume-slider-container" v-show="showVolumeSlider">
              <div class="volume-display">{{ volumeLevel }}%</div>
              <input
                type="range"
                min="0"
                max="100"
                :value="volumeLevel"
                class="volume-slider"
                :style="volumeSliderStyle"
                @input="changeVolume"
                @change="changeVolume"
              />
            </div>
            <img
              src="/static/mediaList/video/sound.png"
              class="img-center margin-left"
              alt="音量控制"
              @click="toggleVolumeSlider"
            />
          </div>
          <!-- 添加播放速度控制 -->
          <div style="position: relative" ref="speedControlRef">
            <div class="speed-slider-container" v-show="showSpeedSlider">
              <div
                v-for="speed in speedOptions"
                :key="speed.value"
                class="speed-option"
                :class="{ active: currentSpeed === speed.value }"
                @click="setPlaybackRate(speed.value)"
              >
                {{ speed.label }}
              </div>
            </div>
            <span class="img-center margin-left" @click="toggleSpeedSlider"
              >倍速</span
            >
          </div>
          <div
            style="
              position: relative;
              display: inline-flex;
              align-items: center;
            "
          >
            <img
              src="/static/mediaList/img/dowload.png"
              class="img-center margin-left"
              alt=""
              @click="downloadItem"
            />
            <span class="divider"></span>
          </div>
          <img
            src="/static/mediaList/img/del.png"
            class="img-center margin-left"
            alt=""
            @click="delItem"
          />
        </div>
        <!-- 缩略图导航 -->
        <div class="thumbnail-container">
          <!-- 缩略图列表 -->
          <div class="thumbnail-wrapper" ref="thumbnailWrapper">
            <!-- 左滚动按钮 -->
            <button
              class="scroll-button scroll-button-left"
              @click="scrollThumbnails('left')"
              v-show="canScrollLeft"
            >
              <svg viewBox="0 0 24 24" width="24" height="24">
                <path
                  d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                  fill="currentColor"
                />
              </svg>
            </button>
            <!-- 缩略图列表 -->
            <div class="thumbnail-list" ref="thumbnailList">
              <div
                v-for="(item, index) in imgList"
                :key="item.id"
                class="thumbnail-item"
                :class="{ active: index === currentIndex }"
                @click="selectMedia(index)"
                ref="thumbnailItems"
              >
                <!-- 缩略图：图片 -->
                <div
                  v-if="isImageFormat(item.suffix)"
                  class="thumb-item-container"
                >
                  <img
                    :src="item.fileUrl"
                    crossorigin="anonymous"
                    alt=""
                    class="thumb-img"
                  />
                </div>
                <!-- 缩略图：视频 -->
                <div
                  v-else-if="isVideoFormat(item.suffix)"
                  class="thumb-video-container"
                >
                  <img :src="item.fileUrl" class="thumb-img" />
                  <img
                    src="/static/mediaList/video/videoBg.png"
                    alt=""
                    class="video-play-icon"
                  />
                </div>
              </div>
            </div>
            <!-- 右滚动按钮 -->
            <button
              class="scroll-button scroll-button-right"
              @click="scrollThumbnails('right')"
              v-show="canScrollRight"
            >
              <svg viewBox="0 0 24 24" width="24" height="24">
                <path
                  d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改模板中的关闭按钮部分 -->
    <div class="content-wrapper">
      <transition name="slide">
        <div :class="['content', isShow ? '' : 'update']" v-show="isShow">
          <transition name="close" appear>
            <img
              src="/static/mediaList/video/close.png"
              alt="关闭详情"
              class="close"
              @click="handleBack"
            />
          </transition>
          <div class="info">
            <h3>详细信息</h3>
            <div class="item">
              <!-- 根据当前媒体类型显示不同标题 -->
              <span class="title">{{
                currentMediaType === "video" ? "视频名称" : "图片名称"
              }}</span>
              <div v-if="isEdit" class="flex">
                <ElInput
                  v-model="name"
                  placeholder="请输入"
                  clearable
                  @input="handleNameInput"
                  @blur="validateName"
                  type="textarea"
                  maxlength="100"
                  show-word-limit
                  style="
                    width: 168px;
                    border-radius: 3px;
                    border: 1px solid #2f69eb;
                  "
                />
                <img :src="imgSrc" alt="" class="dui" @click="save" />
                <img :src="imgSrc1" alt="" class="dui" @click="cancelEdit" />
              </div>
              <div v-else>
                <div class="flex editNamewidth">
                  <ElPopover
                    placement="top"
                    trigger="hover"
                    :width="200"
                    v-if="name.length > 30"
                  >
                    <template #reference>
                      <span class="spanText single-line-ellipsis">{{
                        name
                      }}</span>
                    </template>
                    <div class="multi-line-content">
                      {{ name }}
                    </div>
                  </ElPopover>
                  <span class="spanText" v-else>{{ name }}</span>
                  <img
                    class="edit"
                    src="/static/mediaList/video/edit.png"
                    alt=""
                    @click="isEdit = true"
                  />
                </div>
              </div>
            </div>
            <div class="item">
              <span class="title">任务名称</span>
              <p>{{ record?.taskName || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">航线名称</span>
              <p>{{ record?.airlineName || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">分辨率</span>
              <p>{{ record?.resolution || "--" }}</p>
            </div>
            <!-- 只有视频才显示帧频 -->
            <div class="item" v-if="currentMediaType === 'video'">
              <span class="title">帧频</span>
              <p>{{ record?.frameRate || "--" }}</p>
            </div>
            <!-- 根据当前媒体类型显示不同标题 -->
            <div class="item">
              <span class="title">{{
                currentMediaType === "video" ? "视频大小" : "图片大小"
              }}</span>
              <p>{{ record?.fileSize || "--" }}</p>
            </div>
            <!-- 只有视频才显示视频时长 -->
            <div class="item" v-if="currentMediaType === 'video'">
              <span class="title">视频时长</span>
              <p>{{ record?.duration || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">拍摄时间</span>
              <p>{{ record?.takeTime || "--" }}</p>
            </div>
            <div class="item">
              <span class="title">拍摄负载</span>
              <p>{{ record?.deviceModel || "--" }}</p>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <share ref="shareModal" />
  </div>
</template>

<script lang="ts" setup>
import {
  ElButton,
  ElInput,
  ElMessageBox,
  ElMessage,
  ElTooltip,
  ElPopover,
} from "element-plus";
import { onMounted, ref, nextTick, onUnmounted, computed, watch } from "vue";
import { router } from "#/router";
import { updateName, medialnfo, deleteMedia, imgAll } from "#/api/sys/media";
import share from "../share.vue";

interface ImageTransform {
  scale: number;
  rotate: number;
}
const imageTransforms = ref<Record<string, ImageTransform>>({});
const drawer = ref(true);
const name = ref("");
const originalName = ref(""); // 保存原始名称
const nameError = ref(false); // 名称验证错误状态
const imgList = ref<any[]>([]);
const selectedImgId = ref<string | number>("");
const currentIndex = ref(0);
const imgSrc = ref("/static/mediaList/img/dui.png");
const imgSrc1 = ref("/static/mediaList/img/cuo.png");
const isEdit = ref(false);
const isShow = ref(true);
const record = ref<any>({});
const pageContainer = ref<HTMLElement | null>(null);
const videoRef = ref<HTMLVideoElement | null>(null);
const isPlaying = ref(false); // 播放状态
const isFullScreen = ref(false); // 全屏状态
const volumeLevel = ref(50); // 默认音量50%
const isMuted = ref(false); // 默认非静音
const showVolumeSlider = ref(false); // 是否显示音量滑块
const showSpeedSlider = ref(false); // 是否显示速度滑块
const currentSpeed = ref(1.0); // 当前播放速度
const speedControlRef = ref<HTMLElement | null>(null); // 速度控制引用

// 原生缩略图滚动相关变量
const thumbnailWrapper = ref<HTMLElement>();
const thumbnailList = ref<HTMLElement>();
const thumbnailItems = ref<HTMLElement[]>([]);
const canScrollLeft = ref(false);
const canScrollRight = ref(false);

// 播放速度选项
const speedOptions = [
  { label: "0.5x", value: 0.5 },
  { label: "1.0x", value: 1.0 },
  { label: "1.25x", value: 1.25 },
  { label: "1.5x", value: 1.5 },
  { label: "2.0x", value: 2.0 },
];

// 图片相关变量
const minScale = 0.5;
const maxScale = 3;
const scaleStep = 0.2;
const showFullscreenClose = ref(false);

// 根据suffix判断当前媒体类型
const currentMediaType = computed(() => {
  if (!imgList.value || imgList.value.length === 0 || currentIndex.value < 0) {
    return "image";
  }
  const currentItem = imgList.value[currentIndex.value];
  if (!currentItem || !currentItem.suffix) {
    return "image";
  }

  // 常见图片格式
  const imageFormats = ["jpeg", "jpg", "png", "gif", "bmp", "webp", "svg"];
  // 常见视频格式
  const videoFormats = [
    "mp4",
    "avi",
    "mov",
    "wmv",
    "flv",
    "mkv",
    "webm",
    "m4v",
  ];

  const suffix = currentItem.suffix.toLowerCase();

  if (imageFormats.includes(suffix)) {
    return "image";
  } else if (videoFormats.includes(suffix)) {
    return "video";
  }

  // 默认返回图片
  return "image";
});

// 初始化图片变换状态的函数
const initImageTransform = (imageId: string) => {
  if (!imageTransforms.value[imageId]) {
    imageTransforms.value[imageId] = {
      scale: 1,
      rotate: 0,
    };
  }
};

// 添加响应式计算属性用于音量进度条样式
const volumeSliderStyle = computed(() => {
  return {
    "--volume-percent": `${volumeLevel.value}%`,
    "writing-mode": "vertical-lr",
    direction: "rtl",
  };
});

// 完全重置当前图片的变换状态
const resetCurrentImageTransform = () => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return;

  imageTransforms.value[currentImageId] = {
    scale: 1,
    rotate: 0,
  };

  updateCurrentImageTransform({});
};

// 获取当前图片的变换状态
const getCurrentImageTransform = () => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return { scale: 1, rotate: 0 };

  initImageTransform(currentImageId);
  return imageTransforms.value[currentImageId];
};

// 更新当前图片的变换状态
const updateCurrentImageTransform = (transform: Partial<ImageTransform>) => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return;

  initImageTransform(currentImageId);
  Object.assign(imageTransforms.value[currentImageId], transform);
};

// 获取当前激活的视频元素
const getCurrentVideo = (): HTMLVideoElement | null => {
  // 通过ref直接获取当前视频元素
  return videoRef.value;
};

// 快退功能（10秒）
const rewind = () => {
  const video = getCurrentVideo();
  if (video) {
    video.currentTime = Math.max(0, video.currentTime - 10);
  }
};

// 快进功能（10秒）
const fastForward = () => {
  const video = getCurrentVideo();
  if (video) {
    video.currentTime = Math.min(video.duration, video.currentTime + 10);
  }
};

// 切换播放/暂停状态
const togglePlay = () => {
  const video = getCurrentVideo();
  if (video) {
    if (isPlaying.value) {
      video.pause();
      isPlaying.value = false;
    } else {
      video.play().catch((err) => {
        console.error("视频播放失败:", err);
        // 播放失败时重置播放状态
        isPlaying.value = false;
      });
    }
  }
};

// 播放事件处理
const onPlay = () => {
  isPlaying.value = true;
};

// 暂停事件处理
const onPause = () => {
  isPlaying.value = false;
};

// 视频结束事件处理
const onEnded = () => {
  isPlaying.value = false;
};

// 视频播放错误事件处理
const onError = () => {
  isPlaying.value = false;
};

// 视频数据加载完成
const onVideoLoaded = (event: Event) => {
  const video = event.target as HTMLVideoElement;
  if (video) {
    // 设置默认音量为50%，非静音
    video.volume = volumeLevel.value / 100;
    video.muted = isMuted.value;
    // 设置默认播放速度
    video.playbackRate = currentSpeed.value;
  }
};

// 切换静音状态
const toggleMute = () => {
  const video = getCurrentVideo();
  if (video) {
    isMuted.value = !isMuted.value;
    video.muted = isMuted.value;
    if (!isMuted.value && volumeLevel.value === 0) {
      volumeLevel.value = 80;
      video.volume = 0.8;
    }
  }
};

// 改变音量
const changeVolume = (event: Event) => {
  const target = event.target as HTMLInputElement;
  volumeLevel.value = parseInt(target.value, 10);

  const video = getCurrentVideo();

  if (video) {
    const volume = volumeLevel.value / 100;
    video.volume = volume;

    // 当音量为0时自动设置为静音
    if (volume === 0) {
      isMuted.value = true;
      video.muted = true;
    } else {
      // 当音量大于0时取消静音
      isMuted.value = false;
      video.muted = false;
    }
  }
};

// 切换音量滑块显示和静音状态
const toggleVolumeSlider = (event: Event) => {
  event.stopPropagation(); // 阻止事件冒泡
  showVolumeSlider.value = !showVolumeSlider.value;

  // 如果显示音量控制面板，同步当前视频的音量到滑块
  if (showVolumeSlider.value) {
    const video = getCurrentVideo();
    if (video) {
      // 同步视频当前音量到滑块
      volumeLevel.value = Math.round(video.volume * 100);
      isMuted.value = video.muted;
    }
  }
};

// 设置播放速度
const setPlaybackRate = (rate: number) => {
  currentSpeed.value = rate;
  const video = getCurrentVideo();
  if (video) {
    video.playbackRate = rate;
  }
  showSpeedSlider.value = false;
};

// 获取当前视频的播放速度
const getCurrentPlaybackRate = () => {
  const video = getCurrentVideo();
  if (video) {
    return video.playbackRate;
  }
  return 1.0;
};

// 初始化视频播放速度
const initVideoPlaybackRate = () => {
  const video = getCurrentVideo();
  if (video) {
    video.playbackRate = currentSpeed.value;
  }
};

// 切换速度滑块显示
const toggleSpeedSlider = (event: Event) => {
  event.stopPropagation(); // 阻止事件冒泡
  showSpeedSlider.value = !showSpeedSlider.value;

  // 如果显示速度控制面板，同步当前视频的播放速度到控件
  if (showSpeedSlider.value) {
    const video = getCurrentVideo();
    if (video) {
      currentSpeed.value = video.playbackRate;
    }
  }
};

// 判断是否为图片格式
const isImageFormat = (suffix: string | undefined) => {
  if (!suffix) return false;
  const imageFormats = ["jpeg", "jpg", "png", "gif", "bmp", "webp", "svg"];
  return imageFormats.includes(suffix.toLowerCase());
};

// 判断是否为视频格式
const isVideoFormat = (suffix: string | undefined) => {
  if (!suffix) return false;
  const videoFormats = [
    "mp4",
    "avi",
    "mov",
    "wmv",
    "flv",
    "mkv",
    "webm",
    "m4v",
  ];
  return videoFormats.includes(suffix.toLowerCase());
};

// 获取图片样式（带变换效果）
const getImageStyle = (imageId: string) => {
  const transform = imageTransforms.value[imageId];
  if (!transform) {
    return {};
  }
  return {
    transform: `scale(${transform.scale}) rotate(${transform.rotate}deg)`,
    transition: "transform 0.3s ease",
  };
};

// 图片缩放功能
const zoomIn = () => {
  const currentTransform = getCurrentImageTransform();
  if (currentTransform.scale < maxScale) {
    updateCurrentImageTransform({
      scale: currentTransform.scale + scaleStep,
    });
  }
};

const zoomOut = () => {
  const currentTransform = getCurrentImageTransform();
  if (currentTransform.scale > minScale) {
    updateCurrentImageTransform({
      scale: currentTransform.scale - scaleStep,
    });
  }
};

// 重置当前图片的缩放
const resetScale = () => {
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (!currentImageId) return;

  imageTransforms.value[currentImageId] = {
    scale: 1,
    rotate: 0,
  };

  updateCurrentImageTransform({});
};

// 旋转相关功能
const rotateLeft = () => {
  const currentTransform = getCurrentImageTransform();
  updateCurrentImageTransform({
    rotate: currentTransform.rotate - 90,
  });
};

const rotateRight = () => {
  const currentTransform = getCurrentImageTransform();
  updateCurrentImageTransform({
    rotate: currentTransform.rotate + 90,
  });
};

// 原生媒体切换功能
const previousMedia = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    nextTick(() => {
      scrollToCenter();
      // 更新详细信息
      updateImageInfo(currentIndex.value);
    });
  }
};

const nextMedia = () => {
  if (currentIndex.value < imgList.value.length - 1) {
    currentIndex.value++;
    nextTick(() => {
      scrollToCenter();
      // 更新详细信息
      updateImageInfo(currentIndex.value);
    });
  }
};

const selectMedia = (index: number) => {
  if (index >= 0 && index < imgList.value.length) {
    currentIndex.value = index;
    nextTick(() => {
      scrollToCenter();
      // 更新详细信息
      updateImageInfo(index);
    });
  }
};

// 缩略图滚动功能
const scrollThumbnails = (direction: "left" | "right") => {
  const step = 6; // 每次滚动6张图片
  const total = imgList.value.length;
  if (total === 0) return;

  const current = currentIndex.value;
  let target = current;

  if (direction === "left") {
    // 向左滚动，显示前面的图片
    target = Math.max(0, current - step);
  } else {
    // 向右滚动，显示后面的图片
    target = Math.min(total - 1, current + step);
  }

  if (target !== current) {
    currentIndex.value = target;
    nextTick(() => {
      scrollToCenter();
      // 更新详细信息
      updateImageInfo(target);
    });
  }
};

// 检查滚动状态
const checkScrollStatus = () => {
  if (!thumbnailList.value) return;

  const { scrollLeft, scrollWidth, clientWidth } = thumbnailList.value;
  canScrollLeft.value = scrollLeft > 0;
  canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1;
};

// 标记是否正在程序化滚动
const isProgrammaticScroll = ref(false);

// 确保当前选中的缩略图居中显示
const scrollToCenter = () => {
  if (!thumbnailList.value || !thumbnailItems.value) return;

  const container = thumbnailList.value;
  const activeItem = thumbnailItems.value[currentIndex.value];

  if (activeItem) {
    isProgrammaticScroll.value = true;

    const itemLeft = activeItem.offsetLeft;
    const itemWidth = activeItem.offsetWidth;
    const containerWidth = container.clientWidth;

    // 计算目标滚动位置，使选中的缩略图居中
    const itemCenter = itemLeft + itemWidth / 2;
    const containerCenter = containerWidth / 2;
    const targetScrollLeft = itemCenter - containerCenter;

    // 确保滚动位置在有效范围内
    const maxScrollLeft = container.scrollWidth - containerWidth;
    const minScrollLeft = 0;
    const finalScrollLeft = Math.max(
      minScrollLeft,
      Math.min(targetScrollLeft, maxScrollLeft)
    );

    container.scrollTo({
      left: finalScrollLeft,
      behavior: "smooth",
    });

    setTimeout(() => {
      checkScrollStatus();
      isProgrammaticScroll.value = false;
    }, 400);
  }
};

// 添加一个标志来跟踪是否是用户主动切换
const isUserInitiatedSwitch = ref(false);

// 添加防抖变量
const isSwitching = ref(false);
const switchToSlide = (index: number) => {
  // 防止重复切换
  if (isSwitching.value || index === currentIndex.value) {
    console.log("switchToSlide: prevented duplicate switch");
    return;
  }

  isSwitching.value = true;
  isUserInitiatedSwitch.value = true; // 标记为用户主动切换

  if (!imgList.value || imgList.value.length === 0) {
    isSwitching.value = false;
    return;
  }

  if (index < 0 || index >= imgList.value.length) {
    isSwitching.value = false;
    return;
  }

  // 先重置当前图片的变换状态为1:1
  const currentImageId = imgList.value[currentIndex.value]?.id;
  if (currentImageId) {
    imageTransforms.value[currentImageId] = {
      scale: 1,
      rotate: 0,
    };
  }

  // 如果当前是视频且正在播放，先暂停
  if (isVideoFormat(imgList.value[currentIndex.value]?.suffix)) {
    const oldVideo = getCurrentVideo();
    if (oldVideo && !oldVideo.paused) {
      oldVideo.pause();
      isPlaying.value = false;
    }
  }

  // 更新索引
  const oldIndex = currentIndex.value;
  currentIndex.value = index;

  // 重置播放状态为暂停
  isPlaying.value = false;

  // 隐藏音量控制面板
  showVolumeSlider.value = false;

  // 确保新图片也初始化为1:1状态
  const newImageId = imgList.value[index]?.id;
  if (newImageId) {
    imageTransforms.value[newImageId] = {
      scale: 1,
      rotate: 0,
    };
  }

  // 在DOM更新后确保图片样式正确应用，并且视频音量正确设置
  nextTick(() => {
    // 如果切换到视频，设置音量并确保为暂停状态
    if (isVideoFormat(imgList.value[index]?.suffix)) {
      const video = getCurrentVideo();
      if (video) {
        // 保持当前音量设置而不是重置为0
        video.volume = volumeLevel.value / 100;
        video.muted = isMuted.value;
        // 确保视频为暂停状态
        if (!video.paused) {
          video.pause();
        }
        isPlaying.value = false;
        // 设置播放速度
        video.playbackRate = currentSpeed.value;
      }
    }

    // 延迟执行，确保DOM更新完成
    setTimeout(() => {
      // 调用scrollToCenter确保缩略图居中
      scrollToCenter();
      updateImageInfo(index);
      isSwitching.value = false;
      // 标记为用户主动切换
      isUserInitiatedSwitch.value = true;
      // 重置标志，确保下一次切换时正确判断
      setTimeout(() => {
        isUserInitiatedSwitch.value = false;
      }, 100);
    }, 350);
  });
};

const updateImageInfo = (index: number) => {
  if (imgList.value[index]) {
    const params = {
      id: imgList.value[index].id,
    };
    medialnfo(params).then(({ data }) => {
      name.value = data.fileName;
      record.value = data;
    });
  }
};

// 上一张图片
const goToPrevious = () => {
  const prevIndex =
    currentIndex.value > 0 ? currentIndex.value - 1 : imgList.value.length - 1;
  switchToSlide(prevIndex);
};

// 下一张图片
const goToNext = () => {
  const nextIndex =
    currentIndex.value < imgList.value.length - 1 ? currentIndex.value + 1 : 0;
  switchToSlide(nextIndex);
};

// 键盘事件处理
const handleKeydown = (event: KeyboardEvent) => {
  switch (event.key) {
    case "ArrowLeft":
      previousMedia();
      break;
    case "ArrowRight":
      nextMedia();
      break;
    case "Escape":
      // 可以添加退出全屏或关闭预览的逻辑
      break;
  }
};

// 监听currentIndex变化，自动居中缩略图
watch(currentIndex, () => {
  nextTick(() => {
    scrollToCenter();
  });
});

const toggleShowDetail = () => {
  isShow.value = true;
};

// 全屏功能
const toggleFullScreen = () => {
  const container = document.querySelector(".main-media-container");
  if (!container) return;

  if (!isFullScreen.value) {
    // 进入全屏前，重置当前图片的变换状态为1:1比例（但保留旋转角度）
    if (currentMediaType.value === "image") {
      const currentTransform = getCurrentImageTransform();
      // 只重置缩放，保留旋转角度
      updateCurrentImageTransform({ scale: 1 });
    }

    if (container.requestFullscreen) {
      container.requestFullscreen().catch(err => {
        console.error(" fullscreen error:", err);
      });
    } else if ((container as any).mozRequestFullScreen) {
      (container as any).mozRequestFullScreen();
    } else if ((container as any).webkitRequestFullscreen) {
      (container as any).webkitRequestFullscreen();
    } else if ((container as any).msRequestFullscreen) {
      (container as any).msRequestFullscreen();
    }
    showFullscreenClose.value = true;
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if ((document as any).mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any).webkitExitFullscreen) {
      (document as any).webkitExitFullscreen();
    } else if ((document as any).msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
    showFullscreenClose.value = false;
  }
};

// 下载文件
const downloadItem = async () => {
  if (imgList.value[currentIndex.value]) {
    try {
      const currentItem = imgList.value[currentIndex.value];

      // 根据媒体类型选择正确的URL
      let downloadUrl = "";
      if (isVideoFormat(currentItem.suffix)) {
        // 视频使用videoUrl
        downloadUrl = currentItem.videoUrl || currentItem.fileUrl;
      } else {
        // 图片使用fileUrl
        downloadUrl = currentItem.fileUrl;
      }

      if (!downloadUrl) {
        ElMessage.warning("文件地址无效");
        return;
      }

      // 获取文件数据
      const response = await fetch(downloadUrl);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      // 转换为blob
      const blob = await response.blob();

      // 创建对象URL
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;

      // 设置下载文件名
      let filename = currentItem.fileName || "download";
      if (currentItem.suffix) {
        filename = `${filename}.${currentItem.suffix}`;
      }

      link.setAttribute("download", filename);
      link.style.display = "none";

      // 添加到DOM中并触发点击
      document.body.appendChild(link);
      link.click();

      // 清理
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);

      ElMessage.success("下载成功");
    } catch (error) {
      // 如果直接下载失败，降级到新窗口打开
      ElMessage.warning("直接下载失败，将在新窗口打开文件");
      const currentItem = imgList.value[currentIndex.value];
      const downloadUrl = isVideoFormat(currentItem.suffix)
        ? currentItem.videoUrl || currentItem.fileUrl
        : currentItem.fileUrl;
      window.open(downloadUrl, "_blank");
    }
  }
};

const shareModal = ref();
const toggleShare = () => {
  shareModal.value.openDialog(imgList.value[currentIndex.value].id);
};

const spaceInput = (value: string) => {
  name.value = value.replace(/\s+/g, "");
};

const isNavigating = ref(false);

const handleBack = async () => {
  if (isNavigating.value) return;

  isNavigating.value = true;
  try {
    await router.go(-1);
  } finally {
    // 添加一个小延迟确保导航完成
    setTimeout(() => {
      isNavigating.value = false;
    }, 100);
  }
};

const handleClose = () => {
  isShow.value = false;
};

// 处理名称输入
const handleNameInput = (value: string) => {
  // 移除换行符和首尾空格
  let cleanedValue = value.replace(/[\r\n]/g, "").trim();
  name.value = cleanedValue;
};

// 验证名称
const validateName = () => {
  // 检查是否为空或只包含空格
  if (!name.value || name.value.trim() === "") {
    nameError.value = true;
    return false;
  }
  // 检查名称长度
  // if (name.value.length > 20) {
  //   nameError.value = true;
  //   return false;
  // }
  nameError.value = false;
  return true;
};

// 保存名称修改
const save = async () => {
  // 验证名称
  if (!validateName()) {
    ElMessage.error("名称不能为空");
    return;
  }

  // 检查名称是否与原始名称相同
  if (name.value === originalName.value) {
    isEdit.value = false;
    return;
  }

  isEdit.value = false;
  const params = {
    id: imgList.value[currentIndex.value].id,
    fileName: name.value,
  };
  const { code } = await updateName(params);
  if (code == 200) {
    ElMessage.success("修改成功");
    // 更新当前图片的文件名
    imgList.value[currentIndex.value].fileName = name.value;
    // 更新详情信息
    getDetail();
  } else {
    ElMessage.error("操作失败");
  }
};

const cancelEdit = () => {
  isEdit.value = false;
  name.value = originalName.value; // 恢复原始名称
  nameError.value = false;
};

const recoverBtn = () => {
  isShow.value = false;
};

const delItem = async () => {
  try {
    await ElMessageBox.confirm(
      `确认删除【${name.value}】吗？删除后将无法恢复！`,
      "删除确认",
      {
        type: "warning",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }
    );
    const { code } = await deleteMedia({
      id: imgList.value[currentIndex.value].id,
    });
    if (code == 200) {
      ElMessage.success("删除成功");
      getAllList();
    } else {
      ElMessage.error("删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
      console.error("删除失败:", error);
    }
  }
};

const getDetail = async () => {
  const params = {
    id: imgList.value[currentIndex.value].id,
  };
  const { data } = await medialnfo(params);
  name.value = data.fileName;
  originalName.value = data.fileName; // 保存原始名称
  record.value = data;
};

const setInitialSlide = () => {
  if (!imgList.value || imgList.value.length === 0) {
    return;
  }

  const targetId = router.currentRoute.value.query.id;
  const initialIndex = imgList.value.findIndex(
    (item: any) => item.id == targetId
  );

  if (initialIndex !== -1) {
    // 总是更新currentIndex并执行定位，不管当前值是什么
    currentIndex.value = initialIndex;
    // 延迟同步设置缩略图位置，确保DOM完全渲染
    setTimeout(() => {
      scrollToCenter();
    }, 100);
    // 更新详情信息
    updateImageInfo(initialIndex);
  } else {
    currentIndex.value = 0;
    updateImageInfo(0);
  }
};

const getAllList = async () => {
  const params = {
    deviceId: router.currentRoute.value.query.deviceId,
    parentId: router.currentRoute.value.query.parentId,
    fileType: 2,
    deviceType: 2,
  };

  const { data } = await imgAll(params);
  imgList.value = data;
  // 确保默认值为0
  if (currentIndex.value === undefined || currentIndex.value === null) {
    currentIndex.value = 0;
  }
  // 数据加载完成后，如果Swiper已经初始化，设置初始位置
  await nextTick();
  // 延迟执行初始定位，确保DOM完全渲染
  setTimeout(() => {
    setInitialSlide();
  }, 100);
};

// 全屏状态改变处理
const handleFullScreenChange = () => {
  const isFullscreen = !!(
    document.fullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).webkitFullscreenElement ||
    (document as any).msFullscreenElement
  );

  isFullScreen.value = isFullscreen;
  showFullscreenClose.value = isFullscreen;
};

// 图片功能

onMounted(async () => {
  await getAllList();

  // 设置焦点以确保键盘事件能被监听
  await nextTick();
  if (pageContainer.value) {
    pageContainer.value.focus();
  }

  // 初始化当前视频的音量（如果当前是视频）
  await nextTick();
  if (currentMediaType.value === "video") {
    const video = getCurrentVideo();
    if (video) {
      video.volume = volumeLevel.value / 100;
      video.muted = isMuted.value;
    }
  }

  // 点击其他地方隐藏音量滑块和速度滑块
  const handleClickOutside = (event: MouseEvent) => {
    const target = event.target as HTMLElement;
    if (!target.closest(".video-btns")) {
      showVolumeSlider.value = false;
      showSpeedSlider.value = false;
    }
  };
  document.addEventListener("click", handleClickOutside);

  // 添加键盘事件监听
  document.addEventListener("keydown", handleKeydown);

  // 添加缩略图滚动事件监听
  if (thumbnailList.value) {
    thumbnailList.value.addEventListener("scroll", () => {
      if (!isProgrammaticScroll.value) {
        checkScrollStatus();
      }
    });

    // 添加鼠标滚轮事件监听
    thumbnailList.value.addEventListener("wheel", (e) => {
      e.preventDefault();
      const scrollAmount = e.deltaY > 0 ? 100 : -100;
      thumbnailList.value!.scrollBy({
        left: scrollAmount,
        behavior: "smooth",
      });
    });
  }

  // 监听窗口大小变化
  const handleResize = () => {
    nextTick(() => {
      scrollToCenter();
    });
  };
  window.addEventListener("resize", handleResize);

  document.addEventListener("fullscreenchange", handleFullScreenChange);
  document.addEventListener("mozfullscreenchange", handleFullScreenChange);
  document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
  document.addEventListener("msfullscreenchange", handleFullScreenChange);
});

onUnmounted(() => {
  // 清理键盘事件监听
  document.removeEventListener("keydown", handleKeydown);

  // 清理窗口大小变化监听
  window.removeEventListener("resize", () => {
    nextTick(() => {
      scrollToCenter();
    });
  });

  document.removeEventListener("fullscreenchange", handleFullScreenChange);
  document.removeEventListener("mozfullscreenchange", handleFullScreenChange);
  document.removeEventListener(
    "webkitfullscreenchange",
    handleFullScreenChange
  );
  document.removeEventListener("msfullscreenchange", handleFullScreenChange);
});
</script>
<style scoped lang="scss">
.pages {
  width: 100%;
  height: calc(100vh - 86px);
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  overflow: hidden; /* 防止页面滚动 */
  outline: none; /* 隐藏焦点轮廓 */
}

.content-wrapper {
  position: relative;
  width: 316px;
  height: 100%;
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

.left {
  width: calc(100% - 1244px);
  height: 100%;
  background: #000;
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

.title-left {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  margin-top: 66px;
  margin-left: 66px;
  padding-right: 30px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.edit-title {
  margin-top: 66px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit {
  width: 14px;
  height: 14px;
  margin-left: 8px;
}

.center {
  width: 900px;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  flex-shrink: 0; /* 防止在flex布局中被压缩 */
}

/* 添加单行省略号样式 */
.single-line-ellipsis {
  display: inline-block;
  max-width: 200px; /* 根据实际需要调整宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.edit-name {
  width: 180px !important;
}

.video-container {
  position: relative;
}

.video-title-info {
  position: absolute;
  top: 90px;
  left: 12px;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 99;
}

.time {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.info-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  margin-top: 40px;
}

.info-top > span {
  margin-right: 42px;
}

.video-container-img {
  width: 900px;
  height: 506px;
  overflow: hidden; /* 隐藏超出区域 */
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none; /* 防止拖拽时选中图片 */
  background: #000;
  position: relative;
}

.video {
  transform-origin: center center; /* 设置缩放和旋转中心点 */
  max-width: none;
  max-height: none;
  width: 900px;
  height: 506px;
  display: block;
  margin: 0 auto;
  background-color: transparent;
}

.video-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  cursor: pointer;
}

.img-center {
  width: 18px;
  height: 18px;
}

.margin-left {
  margin-left: 32px;
}

.divider {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: #fff;
  opacity: 0.5;
  border-radius: 2px;
}

.center-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  overflow-x: auto; /* 允许横向滚动 */
  overflow-y: hidden;
  scrollbar-width: none; /* 隐藏滚动条 */
  -ms-overflow-style: none; /* 隐藏IE滚动条 */
  padding: 0 10px;
}

.center-img::-webkit-scrollbar {
  display: none; /* 隐藏Chrome滚动条 */
}

.video-container {
  position: relative;
}

.content {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 316px;
  height: 100%;
  // background: #191919;
  margin-left: 38px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.update {
  // background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 316px;
  height: 100%;
  padding-left: 18px;
  position: relative;
  box-sizing: border-box;
}

.close,
.closeAll {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  right: 40px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
  transform-origin: center;
}

.close:hover,
.closeAll:hover {
  opacity: 1;
  transform: rotate(90deg) scale(1.1);
}

.close:active,
.closeAll:active {
  transform: rotate(90deg) scale(0.95);
}

.closeAll {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
  transform-origin: center;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 8px;
  width: 30px;
  height: 30px;
}

.closeAll:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  transform: rotate(90deg) scale(1.15);
}

.closeAll:active {
  transform: rotate(90deg) scale(0.95);
}

.closeAll.clicking {
  animation: clickAnimation 0.3s ease;
}

@keyframes clickAnimation {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(0.9);
  }
  100% {
    transform: rotate(90deg) scale(1);
  }
}

/* 详情面板关闭按钮 */
.content-wrapper .close {
  z-index: 10;
}

/* 全屏模式下的关闭按钮 */
.closeAll {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 8px;
  width: 30px;
  height: 30px;
}

.closeAll:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: rotate(90deg) scale(1.15);
}

/* 进入和离开的过渡动画 */
.slide-enter-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-leave-active {
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 全屏关闭按钮过渡动画 */
.closeAll-enter-active {
  transition: all 0.3s ease-out;
}

.closeAll-leave-active {
  transition: all 0.2s ease-in;
}

.closeAll-enter-from {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

.closeAll-leave-to {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

.info {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  place-content: flex-start flex-start;
  width: 284px;
  height: 506px;
  background: #191919;
  padding-left: 14px;
  margin-top: 70px;
}

h3 {
  font-weight: 600;
  font-size: 12px;
  margin-top: 24px;
  margin-bottom: 22px;
}

.dui {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
}

.item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  font-size: 12px;
}

.title {
  font-weight: 500;
  opacity: 0.6;
  width: 50px;
  margin-right: 12px;
}

.edit {
  color: var(--el-color-primary);
  margin-left: 10px;
  cursor: pointer;
}

.recover {
  position: absolute;
  left: 16px;
  bottom: 10px;
  width: 14px;
  height: auto;
  cursor: pointer;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

:deep(.el-input__wrapper) {
  background-color: #191919;
  border-radius: none;
  box-shadow: none;
  font-size: 10px;
}

:deep(.el-input__inner) {
  color: #fff;
}

/* 全屏样式 */
.video-container-img:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-container-img:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-container-img:-moz-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.video-container-img:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* 添加过渡动画样式 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  // transform: translateX(100%);
  // opacity: 0;
}

// 缩略图样式
.thumbnail-container {
  width: 900px;
  margin: 20px auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.thumbnail-wrapper {
  width: 100%;
  position: relative;
}

.thumbnail-list {
  display: flex;
  gap: 12px;
  padding: 0 50px;
  overflow-x: auto;
  scroll-behavior: smooth;
  align-items: center;
  scrollbar-width: none; /* 隐藏滚动条 Firefox */
  -ms-overflow-style: none; /* 隐藏滚动条 IE/Edge */
}

.thumbnail-list::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 Chrome/Safari */
}

.thumbnail-item {
  flex-shrink: 0;
  width: 100px;
  height: 62px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.thumbnail-item:hover {
  // transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.thumbnail-item.active {
  border-color: #2f69eb;
  // transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(47, 105, 235, 0.6);
}

.thumbnail-item.active::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 1px solid #2f69eb;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(
    45deg,
    rgba(47, 105, 235, 0.2),
    rgba(47, 105, 235, 0.1)
  );
}

.thumb-item-container,
.thumb-video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 10;
}

.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.scroll-button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.scroll-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scroll-button-left {
  left: 10px;
}

.scroll-button-right {
  right: 10px;
}

.main-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.preview-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.nav-button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nav-button:disabled:hover {
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
}

.nav-button-left {
  left: 30px;
}

.nav-button-right {
  right: 30px;
}

.main-media-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.thumb-img {
  width: 100px;
  height: 62px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
  display: block;
  pointer-events: auto;
}

.thumb-active .thumb-img,
.thumb-img:hover {
  opacity: 1;
  // border: 1px solid #2f69eb;
  box-sizing: border-box;
  cursor: pointer;
}

/* 视频缩略图容器 */
.thumb-video-container {
  position: relative;
  width: 100px;
  height: 62px;
  display: inline-block;
  cursor: pointer;
}

.editNamewidth {
  width: 200px;
}

.img-play {
  width: 38px;
  height: 38px;
  margin: 0 34px;
  cursor: pointer;
}

@media (min-width: 1900px) {
  .img-play {
    width: 30px;
    height: 30px;
    margin: 0 46px;
  }

  .editNamewidth {
    width: 250px;
  }

  .thumbnail-container {
    width: 1200px;
  }

  .thumbnail-item {
    width: 132px;
    height: 84px;
  }

  .scroll-button {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .thumb-img {
    width: 132px;
    height: 84px;
    border-radius: 6px;
  }

  /* 大屏视频缩略图容器 */
  .thumb-video-container {
    width: 132px;
    height: 84px;
    position: relative;
  }

  .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    pointer-events: none;
    z-index: 10;
  }

  .left {
    width: 260px;
  }

  .center {
    width: 1200px;
    font-size: 18px;
  }

  .single-line-ellipsis {
    max-width: 300px;
  }

  .edit-name {
    width: 210px !important;
  }

  .content-wrapper {
    width: 420px;
  }

  .video-title-info {
    font-size: 16px;
  }

  .time {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }

  .info {
    width: 378px;
    height: 674px;
    background: #191919;
    margin-top: 80px;
  }

  .info-top > span {
    margin-right: 58px;
    font-size: 21px;
  }

  .content {
    width: 420px;
    padding-left: 20px;
    font-size: 14px;
    margin-left: 40px;
  }

  .title-left {
    margin-top: 88px;
    margin-left: 88px;
    font-size: 18px;
  }

  .edit-title {
    margin-top: 88px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .edit {
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }

  .video-container-img {
    width: 1200px;
    height: 675px;
  }

  .video {
    width: 1200px;
    height: 675px;
  }

  /* 全屏模式下的图片样式 */
  :fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-webkit-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-moz-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-ms-fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .img-center {
    width: 24px;
    height: 24px;
  }

  .margin-left {
    margin-left: 44px;
  }

  .divider {
    right: -22px;
    top: 50%;
    height: 22px;
  }

  .update {
    width: 420px;
    padding-left: 24px;
    font-size: 14px;
  }

  .close,
  .closeAll {
    width: 20px;
    height: 20px;
    top: 34px;
    right: 34px;
  }

  .closeAll {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  h3 {
    font-size: 16px;
    margin-top: 32px;
    margin-bottom: 28px;
  }

  .dui {
    width: 18px;
    height: 18px;
    margin-left: 12px;
  }

  .title {
    min-width: 84px;
    margin-right: 16px;
  }

  .item {
    margin-bottom: 16px;
  }

  .recover {
    left: 20px;
    bottom: 12px;
    width: 18px;
  }

  :deep(.el-input__wrapper) {
    font-size: 14px;
  }

  /* 全屏模式下的图片样式 */
  :fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-webkit-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-moz-full-screen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  :-ms-fullscreen .video {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}

/* 添加多行内容样式 */
.multi-line-content {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
}

.spanText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

:deep(.el-textarea__inner) {
  font-size: 12px !important;
}

/* 音量滑块容器样式 */
.volume-slider-container {
  position: absolute;
  bottom: 40px;
  left: 80%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 15px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.volume-display {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  min-width: 40px;
  text-align: center;
}

.volume-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 100px;
  background: linear-gradient(
    to top,
    #2f69eb 0%,
    #2f69eb var(--volume-percent, 50%),
    rgba(255, 255, 255, 0.3) var(--volume-percent, 50%),
    rgba(255, 255, 255, 0.3) 100%
  );
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.volume-slider::-webkit-slider-runnable-track {
  width: 6px;
  height: 100px;
  background: transparent;
  border-radius: 3px;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #2f69eb;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  margin-left: -4px;
}

.volume-slider::-webkit-slider-thumb:hover {
  background: #4a7ef5;
  transform: scale(1.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.volume-slider::-moz-range-track {
  width: 6px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.volume-slider::-moz-range-progress {
  background: #2f69eb;
  border-radius: 3px;
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #2f69eb;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  margin-left: -4px;
}

.volume-slider::-moz-range-thumb:hover {
  background: #4a7ef5;
  transform: scale(1.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* 播放速度滑块容器样式 */
.speed-slider-container {
  position: absolute;
  bottom: 40px;
  left: 80%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 100;
  min-width: 60px;
}

.speed-option {
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.speed-option:hover {
  background: rgba(47, 105, 235, 0.9);
}

.speed-option.active {
  background: #2f69eb;
  font-weight: 600;
}

@media (min-width: 1900px) {
  .volume-slider-container {
    bottom: 50px;
    padding: 20px 12px;
  }

  .volume-display {
    font-size: 14px;
  }

  .volume-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 8px;
    height: 120px;
  }

  .volume-slider::-webkit-slider-runnable-track {
    width: 8px;
    height: 120px;
  }

  .volume-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-left: -4px;
  }

  .volume-slider::-moz-range-track {
    width: 8px;
    height: 120px;
  }

  .volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    margin-left: -4px;
  }

  .speed-slider-container {
    bottom: 50px;
    padding: 15px;
  }

  .speed-option {
    font-size: 14px;
    padding: 8px 12px;
  }
}

/* 隐藏原生视频控制器的设置菜单 */
.video::-webkit-media-controls-overflow-menu-button {
  display: none !important;
}

.video::-webkit-media-controls-overflow-button {
  display: none !important;
}

.video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

.video::-webkit-media-controls-panel {
  overflow: hidden;
}

.video::-webkit-media-controls {
  overflow: hidden;
}

.video::-webkit-media-controls-playback-speed-button {
  display: none !important;
}

.video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* 隐藏Safari中的溢出菜单按钮 */
.video::-webkit-media-controlsoverflowbuttonelement {
  display: none !important;
}

.video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
}

/* 隐藏Firefox中的溢出按钮 */
.video::-moz-media-controls-overlay-play-button {
  display: none !important;
}

/* 隐藏Chrome/Edge中的溢出菜单按钮 */
.video::-webkit-media-controls-overflow-menu-button {
  display: none !important;
}

/* 移除隐藏原生视频控制器的音量按钮的样式 */
.video::-webkit-media-controls-volume-slider,
.video::-webkit-media-controls-mute-button {
  display: none !important;
}
.video::-moz-media-controls-volume-slider,
.video::-moz-media-controls-mute-button {
  display: none !important;
}
.video::-webkit-media-controls-volume-slider,
.video::-webkit-media-controls-mute-button {
  display: none !important;
}
.video::-moz-media-controls-volume-slider,
.video::-moz-media-controls-mute-button {
  display: none !important;
}

/* 全屏样式 - 让媒体内容占满整个屏幕 */
.main-media-container:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.main-media-container:fullscreen .video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-media-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.main-media-container:-webkit-full-screen .video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-media-container:-moz-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.main-media-container:-moz-full-screen .video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-media-container:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.main-media-container:-ms-fullscreen .video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 全屏时显示控制按钮 */
.main-media-container:fullscreen .video-btns,
.main-media-container:-webkit-full-screen .video-btns,
.main-media-container:-moz-full-screen .video-btns,
.main-media-container:-ms-fullscreen .video-btns {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全屏时隐藏不需要的元素 */
.main-media-container:fullscreen ~ .thumbnail-container,
.main-media-container:-webkit-full-screen ~ .thumbnail-container,
.main-media-container:-moz-full-screen ~ .thumbnail-container,
.main-media-container:-ms-fullscreen ~ .thumbnail-container {
  display: none;
}

.main-media-container:fullscreen ~ .video-title-info,
.main-media-container:-webkit-full-screen ~ .video-title-info,
.main-media-container:-moz-full-screen ~ .video-title-info,
.main-media-container:-ms-fullscreen ~ .video-title-info {
  display: none;
}

.main-media-container:fullscreen ~ .info-top,
.main-media-container:-webkit-full-screen ~ .info-top,
.main-media-container:-moz-full-screen ~ .info-top,
.main-media-container:-ms-fullscreen ~ .info-top {
  display: none;
}
</style>